import React, { useEffect, useState } from 'react';
import useStateRef from 'react-usestateref'
import { Button, Collapse, Select, Input, DatePicker, Table, Pagination, Space, Tag, Popconfirm, notification, Modal, Spin, Tooltip, Dropdown, Menu } from 'antd';
// import QRcode from 'qrcode.react'
import { HeartTwoTone } from '@ant-design/icons';
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Autoplay } from 'swiper';
import { Map, Marker } from "react-amap";
import 'swiper/swiper.scss';
import { fieldGet, enSplit } from "../../common/common";
import moment from "moment";
import { BASE_URL } from "../../request/api"

import Header from "../../components/Header";
import Store from "../../components/Store";
import City from "../../components/City"
import Column from "../../components/Column";
import Editb from '../Building/edit'

import http from "../../request";
import { store } from "../../store/index"
import Footer from "../../components/Footer";
import Recycle from "../../components/Recycle";
import ResizeableTitle from '../../components/ResizableTitle';

import Edit from "./edit";

const { Option } = Select;
const { RangePicker } = DatePicker;
const { TextArea } = Input;
const { Panel } = Collapse
const { SubMenu } = Menu
// const { QRcode } = QRcode

const House = () => {
    // 用于搜索查询
    const field = { city: '=', region: '=', area: '=', estate_name: 'like', position: 'like', room_type: '=', transaction: '=', state: '=', purpose: '=', price: 'between', entrust: 'range', type: '=', house_area: 'between', store_id: '=', staff_id: '=', orientation: '=', floor: 'range' }
    // 表格
    const columnDefault = [
        {
            title: '房源编号',
            dataIndex: 'house_number',
            width:80,
            checked: true,
            fixed: 'left',
            sorter: (a, b) => a.house_number - b.house_number,
        }, {
            title: '交易',
            dataIndex: 'transaction',
            width:80,
            checked: true,
            align: 'center',
            render: e => {
                switch (e) {
                    case '出售': return <Tag color="red">出售</Tag>;
                    case '出租': return <Tag color="orange">出租</Tag>;
                    case '租售': return <Tag color="lime">租售</Tag>;
                    case '仅售': return <Tag color="magenta">仅售</Tag>;
                    case '仅租': return <Tag color="purple">仅租</Tag>;
                    default: return '';
                }
            },
            fixed: 'left',
            sorter: (a, b) => a.transaction.localeCompare(b.transaction, 'zh-CN')
        }, {
            title: '状态',
            dataIndex: 'state',
            width:80,
            checked: true,
            align: 'center',
            render: e => {
                switch (e) {
                    case '有效': return <Tag color="magenta">有效</Tag>;
                    case '预定': return <Tag color="volcano">预定</Tag>;
                    case '已售': return <Tag color="gold">已售</Tag>;
                    case '已租': return <Tag color="green">已租</Tag>;
                    case '我售': return <Tag color="cyan">我售</Tag>;
                    case '我租': return <Tag color="blue">我租</Tag>;
                    case '暂缓': return <Tag color="geekblue">暂缓</Tag>;
                    case '非有效': return <Tag color="purple">非有效</Tag>;
                    case '有效+暂缓': return <Tag color="lime">有效+暂缓</Tag>;
                    case '有效+预定': return <Tag color="yellow">有效+预定</Tag>;
                    default: return '';
                }
            },
            fixed: 'left',
            sorter: (a, b) => a.state.localeCompare(b.state, 'zh-CN')
        }, {
            title: '房型',
            dataIndex: 'room_type',
            width:80,
            checked: true,
            align: 'center',
            render: e => {
                switch (e) {
                    // case '钥匙房': return <Tag color="magenta">钥匙房</Tag>;
                    case '普通房': return <Tag color="magenta">普通房</Tag>;
                    case '优质房': return <Tag color="volcano">优质房</Tag>;
                    case '聚焦房': return <Tag color="gold">聚焦房</Tag>;
                    // case '特盘': return <Tag color="green">特盘</Tag>;
                    // case '封盘': return <Tag color="cyan">封盘</Tag>;
                    // case '网络房': return <Tag color="blue">网络房</Tag>;
                    // case '有照片': return <Tag color="geekblue">有照片</Tag>;
                    // case '有视频': return <Tag color="purple">有视频</Tag>;
                    default: return '';
                }
            },
            fixed: 'left',
            sorter: (a, b) => a.room_type.localeCompare(b.room_type, 'zh-CN')
        }, {
            title: '城区',
            checked: true,
            width:80,
            align: 'center',
            render: e => (e.region_data?.name ?? ''),
            fixed: 'left',
            sorter: (a, b) => a.region_data?.name ?? ''.localeCompare(b.region_data?.name ?? '', 'zh-CN')
        }, {
            title: '片区',
            checked: true,
            width:80,
            align: 'center',
            render: e => (e.area_data?.name ?? ''),
            fixed: 'left',
            sorter: (a, b) => a.area_data?.name ?? ''.localeCompare(b.area_data?.name ?? '', 'zh-CN')
        }, {
            title: '楼盘字典',
            dataIndex: 'estate_data',
            width:80,
            checked: true,
            onCell: () => ({ check: "true" }),
            align: 'center',
            render: e => e?.name ?? '',
            fixed: 'left',
            sorter: (a, b) => a.estate_data?.name ?? ''.localeCompare(b.estate_data?.name ?? '', 'zh-CN')
        }, {
            title: '栋座位置',
            width:80,
            dataIndex: 'building_data',
            checked: true,
            align: 'center',
            render: e => e?.name ?? '',
            sorter: (a, b) => a.building_data?.name ?? ''.localeCompare(b.building_data?.name ?? '', 'zh-CN')
        }, {
            title: '单元',
            dataIndex: 'unit',
            checked: true,
            width:80,
            align: 'center',
            sorter: (a, b) => a.unit - b.unit,
        }, {
            title: '来源',
            dataIndex: 'source',
            width:80,
            checked: true,
            align: 'center',
            sorter: (a, b) => a.source.localeCompare(b.source, 'zh-CN')
        }, {
            title: '用途',
            dataIndex: 'purpose',
            width:80,
            checked: true,
            align: 'center',
            sorter: (a, b) => a.purpose.localeCompare(b.purpose, 'zh-CN')
        }, {
            title: '楼层',
            dataIndex: 'floor',
            width:80,
            checked: true,
            align: 'center',
            sorter: (a, b) => a.floor - b.floor,
        }, {
            title: '总层',
            dataIndex: 'building_data',
            width:80,
            checked: true,
            align: 'center',
            render: e => e?.total_layers ?? '',
            sorter: (a, b) => a.building_data?.total_layers ?? '' - b.building_data?.total_layers ?? '',
        }, {
            title: '房号',
            dataIndex: 'room_num',
            width:80,
            checked: true,
            align: 'center',
            sorter: (a, b) => a.room_num - b.room_num,
        }, {
            title: '房间',
            key: 'id',
            width:80,
            checked: true,
            align: 'center',
            render: e => ((e?.num_room ?? '') + ((e?.num_balcony ?? '') && '-' + (e?.num_balcony ?? '')) + ((e?.num_office ?? '') && '-' + (e?.num_office ?? '')) + ((e?.num_toilet ?? '') && '-' + (e?.num_toilet ?? ''))),
            sorter: (a, b) => (a?.num_room ?? '' + a?.num_balcony ?? '' + a?.num_office ?? '' + a?.num_toilet ?? '').localeCompare((b?.num_room ?? '' + b?.num_balcony ?? '' + b?.num_office ?? '' + b?.num_toilet ?? ''), 'zh-CN')
        }, {
            title: '朝向',
            dataIndex: 'orientation',
            width:80,
            checked: true,
            align: 'center',
            sorter: (a, b) => a.orientation.localeCompare(b.orientation, 'zh-CN')
        }, {
            title: '面积',
            dataIndex: 'house_area',
            width:80,
            checked: true,
            align: 'center',
            sorter: (a, b) => a.house_area - b.house_area,
        }, {
            title: '售单价',
            checked: true,
            width:80,
            align: 'center',
            render: e => (
                <Space size="middle">
                    <div className="u-flex">
                        {e.price_change > 0 && <img src={require('../../assets/icon/icon-32.png').default} alt="" />}
                        {e.price_change < 0 && <img src={require('../../assets/icon/icon-33.png').default} alt="" />}
                        <div>{e?.price?.split(',')[1] ?? ''}/m<sup>2</sup></div>
                    </div>
                </Space>
            ),
            sorter: (a, b) => ((a?.price?.split(',')[1] ?? '') * 1 ? (a?.price?.split(',')[1] ?? '') * 1 : 0) - ((b?.price?.split(',')[1] ?? '') * 1 ? (b?.price?.split(',')[1] ?? '') * 1 : 0),
        }, {
            title: '售总价',
            checked: true,
            align: 'center',
            width:80,
            render: e => (
                <Space size="middle">
                    <div className="u-flex">
                        <div>{parseInt(e.price) || ''}万元</div>
                    </div>
                </Space>
            ),
            sorter: (a, b) => ((a?.price?.split(',')[0] ?? '') ? (a?.price?.split(',')[0] ?? '') : 0) - ((b?.price?.split(',')[0] ?? '') ? (b?.price?.split(',')[0] ?? '') : 0),
        }, {
            title: '租单价',
            checked: true,
            align: 'center',
            width:80,
            render: e => (
                <Space size="middle">
                    <div className="u-flex">
                        {e.rental_change > 0 && <img src={require('../../assets/icon/icon-32.png').default} alt="" />}
                        {e.rental_change < 0 && <img src={require('../../assets/icon/icon-33.png').default} alt="" />}
                        <div>{((e?.rental?.split(',')[1] * 1 ?? 0) || 0).toFixed(2)}/m<sup>2</sup></div>
                    </div>
                </Space>
            ),
            sorter: (a, b) => ((a?.rental?.split(',')[1] ?? 0) ? (a?.rental?.split(',')[1] ?? 0) : 0) - ((b?.rental?.split(',')[1] ?? 0) ? (b?.rental?.split(',')[1] ?? 0) : 0),
        }, {
            title: '租总价',
            checked: true,
            align: 'center',
            width:80,
            render: e => (
                <Space size="middle">
                    <div className="u-flex">
                        <div>{parseInt(e.rental)}/月</div>
                    </div>
                </Space>
            ),
            sorter: (a, b) => parseInt(a.rental) - parseInt(b.rental),
        }, {
            title: '类型',
            dataIndex: 'type',
            width:80,
            checked: true,
            align: 'center',
            sorter: (a, b) => a.type.localeCompare(b.type, 'zh-CN')
        }, {
            title: '建房',
            dataIndex: 'house_years',
            width:80,
            checked: true,
            align: 'center',
            sorter: (a, b) => parseInt(a.house_years) - parseInt(b.house_years),
        }, {
            title: '部门',
            checked: true,
            width:80,
            align: 'center',
            render: e => e.staff?.store?.name ?? '',
            sorter: (a, b) => (a.staff?.store?.name ?? '').localeCompare((b.staff?.store?.name ?? ''), 'zh-CN')
        }, {
            title: '员工',
            checked: true,
            width:80,
            align: 'center',
            render: e => e.staff?.employee?.nickname ?? '',
            sorter: (a, b) => (a.staff?.employee?.nickname ?? '').localeCompare((b.staff?.employee?.nickname ?? ''), 'zh-CN')
        }, {
            title: '委托日',
            dataIndex: 'entrust',
            width:80,
            checked: true,
            align: 'center',
            sorter: (a, b) => a.entrust.localeCompare(b.entrust, 'zh-CN')
        }, {
            title: '收藏',
            checked: true,
            align: 'center',
            render: e => (
                <Space size="middle">
                    <HeartTwoTone twoToneColor={e.is_collect ? '#eb2f96' : '#999'} className="u-btn" onClick={() => collect(e)} />
                </Space>
            )
        }, {
            title: '备注',
            dataIndex: 'remark',
            checked: true,
            width: 200,
            align: 'center',
            render: e => (
                <Tooltip title={e}>
                    <div className="u-line-1" style={{ maxWidth: 200 }}>{e}</div>
                </Tooltip>
            ),
            sorter: (a, b) => a.remark.localeCompare(b.remark, 'zh-CN')
        }, {
            title: '跟进',
            checked: true,
            align: 'center',
            render: e => <Button type="primary" size="small" onClick={() => {
                setOpeVal(e)
                setOpe(!0)
                followGet()
            }}>跟进</Button>
        }, {
            title: '图片',
            checked: true,
            align: 'center',
            render: e => <Button type="primary" size="small" onClick={() => {
                setOpeVal(e)
                setOpeImg(!0)
                followGet()
            }}>图片</Button>
        }, {
            title: '操作',
            key: 'action',
            checked: true,
            render: e => (
                <Space size="middle">
                    <img className="u-btn" src={require('../../assets/icon/icon-12.png').default} alt="" title="编辑" onClick={() => {
                        if ((house2?.fyxq?.value ?? '') === '无') return setjurisdiction(!0)
                        setHouseShow(!0)
                        setHouseId(e.id)
                    }} />
                    <Popconfirm title="确定删除？" okText="确定" cancelText="取消" onConfirm={() => (house2?.fyjl?.value ?? '') === '无' ? setjurisdiction(!0) : houseDel(e.id)}>
                        <img className="u-btn" src={require('../../assets/icon/icon-13.png').default} alt="" title="删除" />
                    </Popconfirm>
                </Space>
            ),
        }
    ]
    const columnDefaul = [
        {
            title: '房源编号',
            dataIndex: 'house_number',
            checked: true,
            width:80,
            fixed: 'left',
            sorter: (a, b) => a.house_number - b.house_number,
        }, {
            title: '交易',
            dataIndex: 'transaction',
            width:80,
            checked: true,
            align: 'center',
            render: e => {
                switch (e) {
                    case '出售': return <Tag color="red">出售</Tag>;
                    case '出租': return <Tag color="orange">出租</Tag>;
                    case '租售': return <Tag color="lime">租售</Tag>;
                    case '仅售': return <Tag color="magenta">仅售</Tag>;
                    case '仅租': return <Tag color="purple">仅租</Tag>;
                    default: return '';
                }
            },
            fixed: 'left',
            sorter: (a, b) => a.transaction.localeCompare(b.transaction, 'zh-CN')
        }, {
            title: '状态',
            dataIndex: 'state',
            width:80,
            checked: true,
            align: 'center',
            render: e => {
                switch (e) {
                    case '有效': return <Tag color="magenta">有效</Tag>;
                    case '预定': return <Tag color="volcano">预定</Tag>;
                    case '已售': return <Tag color="gold">已售</Tag>;
                    case '已租': return <Tag color="green">已租</Tag>;
                    case '我售': return <Tag color="cyan">我售</Tag>;
                    case '我租': return <Tag color="blue">我租</Tag>;
                    case '暂缓': return <Tag color="geekblue">暂缓</Tag>;
                    case '非有效': return <Tag color="purple">非有效</Tag>;
                    case '有效+暂缓': return <Tag color="lime">有效+暂缓</Tag>;
                    case '有效+预定': return <Tag color="yellow">有效+预定</Tag>;
                    default: return '';
                }
            },
            fixed: 'left',
            sorter: (a, b) => a.state.localeCompare(b.state, 'zh-CN')
        }, {
            title: '房型',
            dataIndex: 'room_type',
            width:80,
            checked: true,
            align: 'center',
            render: e => {
                switch (e) {
                    // case '钥匙房': return <Tag color="magenta">钥匙房</Tag>;
                    case '普通房': return <Tag color="magenta">普通房</Tag>;
                    case '优质房': return <Tag color="volcano">优质房</Tag>;
                    case '聚焦房': return <Tag color="gold">聚焦房</Tag>;
                    // case '特盘': return <Tag color="green">特盘</Tag>;
                    // case '封盘': return <Tag color="cyan">封盘</Tag>;
                    // case '网络房': return <Tag color="blue">网络房</Tag>;
                    // case '有照片': return <Tag color="geekblue">有照片</Tag>;
                    // case '有视频': return <Tag color="purple">有视频</Tag>;
                    default: return '';
                }
            },
            fixed: 'left',
            sorter: (a, b) => a.room_type.localeCompare(b.room_type, 'zh-CN')
        }, {
            title: '城区',
            checked: true,
            width:80,
            align: 'center',
            render: e => (e.region_data?.name ?? ''),
            fixed: 'left',
            sorter: (a, b) => a.region_data?.name ?? ''.localeCompare(b.region_data?.name ?? '', 'zh-CN')
        }, {
            title: '片区',
            checked: true,
            align: 'center',
            width:80,
            render: e => (e.area_data?.name ?? ''),
            fixed: 'left',
            sorter: (a, b) => a.area_data?.name ?? ''.localeCompare(b.area_data?.name ?? '', 'zh-CN')
        }, {
            title: '楼盘字典',
            dataIndex: 'estate_data',
            width:80,
            checked: true,
            onCell: () => ({ check: "true" }),
            align: 'center',
            render: e => e?.name ?? '',
            fixed: 'left',
            sorter: (a, b) => a.estate_data?.name ?? ''.localeCompare(b.estate_data?.name ?? '', 'zh-CN')
        }, {
            title: '栋座位置',
            dataIndex: 'building_data',
            width:80,
            checked: true,
            align: 'center',
            render: e => e?.name ?? '',
            sorter: (a, b) => a.building_data?.name ?? ''.localeCompare(b.building_data?.name ?? '', 'zh-CN')
        }, {
            title: '单元',
            dataIndex: 'unit',
            width:80,
            checked: true,
            align: 'center',
            sorter: (a, b) => a.unit - b.unit,
        }, {
            title: '来源',
            dataIndex: 'source',
            width:80,
            checked: true,
            align: 'center',
            sorter: (a, b) => a.source.localeCompare(b.source, 'zh-CN')
        }, {
            title: '用途',
            dataIndex: 'purpose',
            width:80,
            checked: true,
            align: 'center',
            sorter: (a, b) => a.purpose.localeCompare(b.purpose, 'zh-CN')
        }, {
            title: '楼层',
            dataIndex: 'floor',
            width:80,
            checked: true,
            align: 'center',
            sorter: (a, b) => a.floor - b.floor,
        }, {
            title: '总层',
            dataIndex: 'building_data',
            width:80,
            checked: true,
            align: 'center',
            render: e => e?.total_layers ?? '',
            sorter: (a, b) => a.building_data?.total_layers ?? '' - b.building_data?.total_layers ?? '',
        }, {
            title: '房号',
            dataIndex: 'room_num',
            width:80,
            checked: true,
            align: 'center',
            sorter: (a, b) => a.room_num - b.room_num,
        }, {
            title: '跟进',
            checked: true,
            align: 'center',
            render: e => <Button type="primary" size="small" onClick={() => {
                setOpeVal(e)
                setOpe(!0)
                followGet()
            }}>跟进</Button>
        }, {
            title: '图片',
            checked: true,
            align: 'center',
            render: e => <Button type="primary" size="small" onClick={() => {
                setOpeVal(e)
                setOpeImg(!0)
                followGet()
            }}>图片</Button>
        }, {
            title: '操作',
            key: 'action',
            checked: true,
            render: e => (
                <Space size="middle">
                    <img className="u-btn" src={require('../../assets/icon/icon-12.png').default} alt="" title="编辑" onClick={() => {
                        if ((house2?.fyxq?.value ?? '') === '无') return setjurisdiction(!0)
                        setHouseShow(!0)
                        setHouseId(e.id)
                    }} />
                    <Popconfirm title="确定删除？" okText="确定" cancelText="取消" onConfirm={() => (house2?.fyjl?.value ?? '') === '无' ? setjurisdiction(!0) : houseDel(e.id)}>
                        <img className="u-btn" src={require('../../assets/icon/icon-13.png').default} alt="" title="删除" />
                    </Popconfirm>
                </Space>
            ),
        }
    ]

    let { house1, house2 } = { house1: undefined, house2: undefined }
    if (store.getState().userInfo.group_id !== 3) {
        house1 = store.getState().staff.house1
        house2 = store.getState().staff.house2
    }

    const [jurisdiction, setjurisdiction] = useState(!1)
    // 搜索页数
    const pagerDefault = { page: 1, pageSize: 10 }
    // 定义常量
    const [columnCurrent, setColumnCurrent] = useState(columnDefault);
    const [columnCurrents, setcolumnCurrents] = useState(columnDefaul);
    const [params, setParams] = useState({});
    const [source, setSource] = useState([]);
    const [column, setColumn] = useState([]);
    const [pager, setPager] = useState(pagerDefault);
    const [total, setTotal] = useState(0);
    const [select, setSelect] = useState([]);

    const [mask, setMask] = useState({ show: !1, text: '提交中...' })
    // const [followList, setFollowList] = useState([])
    const [follow, setFollow] = useState({ show: !1 })
    const [followForm, setFollowForm] = useState({ is_remind: 1, state: 0 })

    const backColumns = [
        {
            title: '房源编号',
            dataIndex: 'house_number',
            key: 'house_number',
            checked: true,
        }, {
            title: '交易',
            dataIndex: 'transaction',
            key: 'transaction',
            checked: true,
            render: e => {
                switch (e) {
                    case '出售': return <Tag color="red">出售</Tag>;
                    case '出租': return <Tag color="orange">出租</Tag>;
                    case '租售': return <Tag color="lime">租售</Tag>;
                    case '仅售': return <Tag color="magenta">仅售</Tag>;
                    case '仅租': return <Tag color="purple">仅租</Tag>;
                    default: return '';
                }
            }
        }, {
            title: '状态',
            dataIndex: 'state',
            checked: true,
            align: 'center',
            render: e => {
                switch (e) {
                    case '有效': return <Tag color="magenta">有效</Tag>;
                    case '预定': return <Tag color="volcano">预定</Tag>;
                    case '已售': return <Tag color="gold">已售</Tag>;
                    case '已租': return <Tag color="green">已租</Tag>;
                    case '我售': return <Tag color="cyan">我售</Tag>;
                    case '我租': return <Tag color="blue">我租</Tag>;
                    case '暂缓': return <Tag color="geekblue">暂缓</Tag>;
                    case '非有效': return <Tag color="purple">非有效</Tag>;
                    case '有效+暂缓': return <Tag color="lime">有效+暂缓</Tag>;
                    case '有效+预定': return <Tag color="yellow">有效+预定</Tag>;
                    default: return '';
                }
            }
        }, {
            title: '房型',
            dataIndex: 'room_type',
            checked: true,
            align: 'center',
            render: e => {
                switch (e) {
                    case '钥匙房': return <Tag color="magenta">钥匙房</Tag>;
                    case '优质房': return <Tag color="volcano">优质房</Tag>;
                    case '聚焦房': return <Tag color="gold">聚焦房</Tag>;
                    case '特盘': return <Tag color="green">特盘</Tag>;
                    case '封盘': return <Tag color="cyan">封盘</Tag>;
                    case '网络房': return <Tag color="blue">网络房</Tag>;
                    case '有照片': return <Tag color="geekblue">有照片</Tag>;
                    case '有视频': return <Tag color="purple">有视频</Tag>;
                    default: return '';
                }
            }
        }, {
            title: '城区',
            key: 'id',
            checked: true,
            render: e => (e.city_data?.name ?? '') + (e.region_data?.name ?? '') + (e.area_data?.name ?? '')
        }, {
            title: '楼盘字典',
            dataIndex: 'estate_data',
            key: 'estate_id',
            checked: true,
            render: e => e?.name ?? ''
        }, {
            title: '栋座位置',
            dataIndex: 'building_data',
            key: 'building_id',
            checked: true,
            render: e => e?.name ?? ''
        }, {
            title: '房号',
            dataIndex: 'room_num',
            key: 'room_num',
            checked: true,
        }, {
            title: '总层',
            dataIndex: 'total_floor',
            key: 'total_floor',
            checked: true,
        }, {
            title: '房型',
            key: 'id',
            checked: true,
            render: e => (e.num_room ?? '') + (e.num_balcony ? ' ' + e.num_balcony : '') + (e.num_office ? ' ' + e.num_office : '') + (e.num_toilet ? ' ' + e.num_toilet : '')
        }, {
            title: '朝向',
            dataIndex: 'orientation',
            key: 'orientation',
            checked: true,
        }, {
            title: '面积',
            dataIndex: 'house_area',
            key: 'house_area',
            checked: true,
        }, {
            title: '售价',
            dataIndex: 'price_data',
            key: 'price_data',
            checked: true,
        }, {
            title: '租价',
            dataIndex: 'rental_data',
            key: 'rental_data',
            checked: true,
        }, {
            title: '类型',
            dataIndex: 'type',
            key: 'type',
            checked: true,
        }, {
            title: '建房',
            dataIndex: 'house_years',
            key: 'house_years',
            checked: true,
        }, {
            title: '员工',
            dataIndex: 'house_years',
            key: 'house_years',
            checked: true,
        }, {
            title: '委托日',
            dataIndex: 'entrust',
            key: 'entrust',
            checked: true,
        }, {
            title: '最后跟进日',
            dataIndex: 'entrust',
            key: 'entrust',
            checked: true,
        }
    ]

    const [change, setchange] = useState(!0)

    const [fygjchange, setfygjchange] = useState(!0)

    // 控制查看钥匙是否显示
    const [keyShow, setKeyShow] = useState(!1)
    // 控制是显示新增钥匙还是显示管理钥匙
    const [isxin, setisxin] = useState(!1)
    // 钥匙-新增-编辑
    // 控制是否显示新增/管理钥匙
    const [keysModal, setKeysModal] = useState({ show: !1, text: '' })
    // 新增钥匙的字段
    const [keys, setKeys] = useState({})
    // 保存当前的钥匙数据
    const [selected, setSelected] = useState([])
    const [date] = useState({})
    const [form] = useState({})
    // 钥匙数据
    const [keysource, setKeySource] = useState([])
    // 查看钥匙表格配置项
    const [keycolumns] = useState([
        {
            title: '状态',
            dataIndex: 'state',
            align: 'center',
            render: e => {
                switch (e) {
                    case 'stay': return <Tag color="red">在库</Tag>;
                    case 'lend': return <Tag color="orange">借出</Tag>;
                    case 'retreat': return <Tag color="lime">退还</Tag>;
                    case 'void': return <Tag color="cyan">作废</Tag>;
                    default: return '';
                }
            }
        },
        {
            title: '钥匙类型',
            dataIndex: 'type',
            align: 'center',
        },
        {
            title: '钥匙编号',
            dataIndex: 'house_id',
            align: 'center',
        },
        {
            title: '房源地址',
            dataIndex: 'house_data',
            align: 'center',
            render: e => (
                <Tooltip>
                    <div className="u-line-1" style={{ maxWidth: 150 }}>{e?.estate_data?.detailed_address ?? ''}</div>
                </Tooltip>
            )
        },
        {
            title: '钥匙编号',
            dataIndex: 'number',
            align: 'center',
        },
        {
            title: '所在门店',
            dataIndex: 'store_data',
            align: 'center',
            render: e => e?.name ?? ''
        },
        {
            title: '归属人',
            dataIndex: 'staff_data',
            align: 'center',
            render: e => e?.nickname ?? ''
        },
        {
            title: '收钥匙日期',
            dataIndex: 'obtain_time_text',
            align: 'center',
        },
        {
            title: '备注',
            dataIndex: 'memo',
            align: 'center',
            render: e => (
                <div className="u-line-1" style={{ maxWidth: 120 }}>{e}</div>
            )
        },
        {
            title: '最后操作人',
            dataIndex: 'oper_data',
            align: 'center',
            render: e => e?.nickname ?? ''
        },
        {
            title: '最后操作日期',
            align: 'center',
            dataIndex: 'oper_time_text',
        },
        {
            title: '操作',
            align: 'center',
            render: e => (
                <Space size="middle">
                    <img className="u-btn" src={require('../../assets/icon/icon-12.png').default} alt="" title="编辑" onClick={() => {
                        keysEdit(e.id)
                        setisxin(!1)
                    }} />
                    <Popconfirm title="确定删除？" okText="确定" cancelText="取消" onConfirm={() => keysDel(e.id)}>
                        <img className="u-btn" src={require('../../assets/icon/icon-13.png').default} alt="" title="删除" />
                    </Popconfirm>
                </Space>
            ),
        },
    ])
    // 查看钥匙 回收站-列
    const keybackColumns = [
        {
            title: '状态',
            dataIndex: 'state',
            align: 'center',
            render: e => {
                switch (e) {
                    case 'stay': return <Tag color="red">在库</Tag>;
                    case 'lend': return <Tag color="orange">借出</Tag>;
                    case 'retreat': return <Tag color="lime">退还</Tag>;
                    case 'void': return <Tag color="cyan">作废</Tag>;
                    default: return '';
                }
            }
        }, {
            title: '钥匙类型',
            dataIndex: 'type',
            align: 'center',
        }, {
            title: '房源编号',
            dataIndex: 'house_id',
            align: 'center',
        }, {
            title: '房源地址',
            dataIndex: 'house_data',
            align: 'center',
            render: e => (
                <Tooltip>
                    <div className="u-line-1" style={{ maxWidth: 150 }}>{e?.estate_data?.detailed_address ?? ''}</div>
                </Tooltip>
            )
        }, {
            title: '钥匙编号',
            dataIndex: 'number',
            align: 'center',
        }, {
            title: '所在门店',
            dataIndex: 'store_data',
            align: 'center',
            render: e => e?.name ?? ''
        }, {
            title: '归属人',
            dataIndex: 'staff_data',
            align: 'center',
            render: e => e?.nickname ?? ''
        }, {
            title: '收钥匙日期',
            dataIndex: 'obtain_time_text',
            align: 'center',
        }, {
            title: '备注',
            dataIndex: 'memo',
            align: 'center',
            render: e => (
                <div className="u-line-1" style={{ maxWidth: 120 }}>{e}</div>
            )
        }, {
            title: '最后操作人',
            dataIndex: 'oper_data',
            align: 'center',
            render: e => e?.nickname ?? ''
        }, {
            title: '最后操作日期',
            dataIndex: 'oper_time_text',
            align: 'center',
        }
    ]

    // 图片
    const [pictureshow, setpictureshow] = useState(!1)
    // 图片数据
    const [picturesource, setpicturesource] = useState([])

    // 地图中心坐标，经度，纬度
    const [center, setCenter] = useState({ longitude: 115, latitude: 30 })
    const [mapshow, setmapshow] = useState(!1)

    // 员工通讯录
    const [contacts, setcontacts] = useState(!1)
    // 部门信息
    const [allStore, setAllStore] = useState([])
    // 员工身份信息
    const [allAuth, setAllAuth] = useState([])
    // 通讯录表格配置项
    const contactsTable = [
        {
            title: '头像',
            checked: true,
            align: 'center',
            render: e => e?.avatar ?? 0 ? <img className="avatar" src={e.avatar} style={{ width: 60 }} alt="" /> : ''
        }, {
            title: '名称',
            checked: true,
            align: 'center',
            render: e => e?.username ?? ''
        }, {
            title: '性别',
            checked: true,
            align: 'center',
            render: e => (
                <Space size="middle">
                    {e?.gender === 1 ? <Tag color="blue">男</Tag> : <Tag color="red">女</Tag>}
                </Space>
            )
        }, {
            title: '职务',
            checked: true,
            align: 'center',
            render: e => e?.group?.name ?? ''
        }, {
            title: '电话',
            checked: true,
            align: 'center',
            render: e => e?.mobile ?? ''
        }, {
            title: '邮件',
            checked: true,
            align: 'center',
            render: e => e?.email ?? ''
        }, {
            title: '生日',
            checked: true,
            align: 'center',
            render: e => e?.birthday ?? ''
        }
    ]
    // 通讯录内容
    const [contactsSource, setcontactsSource] = useState([])
    // 通讯录搜索请求字段
    const [staffSearch, setstaffSearch] = useState({})
    const [staffPager, setStaffPager] = useState({ page: 1, pageSize: 10 })
    const [staffTotal, setStaffTotal] = useState(0)

    // 二维码
    const [qrcodeshow, setqrcodeshow] = useState(!1)

    // 编辑
    const [houseShow, setHouseShow] = useState(!1)
    const [houseId, setHouseId] = useState(0)

    // 房源跟进
    const [followShow, setFollowShow] = useState(!1)
    const [followSearch, setFollowSearch] = useState({})
    const [followPager, setFollowPager] = useState(pagerDefault)
    const [followTotal, setFollowTotal] = useState(0)
    // 房源跟进配置项
    const followColumn = [
        {
            title: '城区',
            key: 'id',
            checked: true,
            align: 'center',
            render: e => (e.house?.city_data?.name ?? '') + (e.house?.region_data?.name ?? '') + (e.house?.area_data?.name ?? '')
        }, {
            title: '楼盘字典',
            checked: true,
            align: 'center',
            render: e => e?.house?.estate_data?.name ?? ''
        }, {
            title: '交易',
            checked: true,
            align: 'center',
            render: e => e?.house?.transaction ?? ''
        }, {
            title: '状态',
            checked: true,
            align: 'center',
            render: e => e?.house?.state ?? ''
        }, {
            title: '栋座位置',
            checked: true,
            align: 'center',
            render: e => e?.house?.building_data?.name ?? ''
        }, {
            title: '房号',
            checked: true,
            align: 'center',
            render: e => e?.house?.room_num
        }, {
            title: '跟进时间',
            dataIndex: 'follow_up_time',
            align: 'center',
        }, {
            title: '跟进方式',
            dataIndex: 'follow_up_mode',
            align: 'center',
        }, {
            title: '员工',
            align: 'center',
            render: e => (e.follow_up_store_data?.name ?? '') + '-' + (e.follow_up_staff_data?.nickname ?? '')
        }, {
            title: '审核',
            align: 'center',
            render: e => e.state === 0 ? '已审' : '未审'
        }, {
            title: '去电业主',
            dataIndex: 'owner',
            align: 'center',
        }, {
            title: '跟进类型',
            dataIndex: 'follow_up_type',
            align: 'center',
        }, {
            title: '跟进内容',
            dataIndex: 'content',
            width: 150,
            align: 'center',
            render: e => (
                <Tooltip title={e}>
                    <div className="u-line-1" style={{ maxWidth: 150 }}>{e}</div>
                </Tooltip>
            )
        }
    ]
    const followColumns = [...followColumn, {
        title: '操作',
        key: 'action',
        checked: true,
        align: 'center',
        render: e => (
            <Space size="middle">
                <Popconfirm title="确定删除？" okText="确定" cancelText="取消" onConfirm={() => (house1?.gjsc?.value ?? 1) ? followFunc.del(e.id) : setjurisdiction(!0)}>
                    <img className="u-btn" src={require('../../assets/icon/icon-13.png').default} alt="" title="删除" />
                </Popconfirm>
            </Space>
        ),
    }]

    const [new_filter, setnew_filter] = useState(undefined)

    const [followSource, setFollowSource] = useState([])
    const [followSelect, setFollowSelect] = useState([])
    const followFunc = {
        list: () => {
            console.log(new_filter);
            if (fygjchange && JSON.parse(sessionStorage.getItem('house_fygj'))) {
                const house = JSON.parse(sessionStorage.getItem('house_fygj'))
                for (const key in house.rows) {
                    if (key * 1 === followPager.page) {
                        setFollowSource(house.rows[key])
                        setFollowTotal(house.total)
                        return
                    }
                }

            }
            http('house.follow.index', {
                ...fieldGet(
                    { follow_up_store_id: '=', follow_up_staff_id: '=', owner: 'like' },
                    followSearch, followPager.page, followPager.pageSize, new_filter
                )
            }).then(res => {
                if (res.code === 1) {
                    const page = followPager.page
                    if (followTotal && fygjchange) {
                        let arr = JSON.parse(sessionStorage.getItem('house_fygj'))
                        arr.rows[page] = []
                        res.data.rows.forEach(i => arr.rows[page].push(i))

                        sessionStorage.setItem('house_fygj', JSON.stringify(arr))
                        setfygjchange(!0)
                        setFollowSource(res.data.rows)
                        setFollowTotal(res.data.total)
                        return
                    }

                    const data = {
                        total: res.data.total,
                        rows: {
                            [page]: res.data.rows
                        }
                    }
                    sessionStorage.setItem('house_fygj', JSON.stringify(data))
                    setfygjchange(!0)
                    setFollowSource(res.data.rows)
                    setFollowTotal(res.data.total)
                }
            }).catch(err => { console.log(err) })
        },
        reset: () => {
            setFollowSearch({})
            setFollowPager(pagerDefault)
        },
        del: (id) => {
            let ids = id > 0 ? [id] : followSelect
            if (!ids.length) {
                notification.error({
                    message: '请先选择'
                })
                return
            }

            if (!(house1?.gjsc_all?.value ?? 1) && !(house1?.gjsc?.value ?? 1)) return setjurisdiction(!0)
            if (!((house1?.gjsc_all?.value ?? 1) && (house1?.gjsc?.value ?? 1))) {
                const storeid = store.getState().userInfo.store_id
                // 判断本部
                if (house1?.gjsc_all?.value ?? 1) {
                    const all = followSource.filter(i => {
                        for (let item of ids) {
                            if (i.id === item) {
                                if (i.follow_up_store_id === storeid) {
                                    return i.id
                                }
                            }
                        }
                    })
                    ids = all.map(i => i.id)
                }
                // 判断跨部
                if (house1?.gjsc?.value ?? 1) {
                    const all = followSource.filter(i => {
                        for (let item of ids) {
                            if (i.id === item) {
                                if (i.follow_up_store_id !== storeid) {
                                    return i.id
                                }
                            }
                        }
                    })
                    ids = all.map(i => i.id)

                }
            }
            http('house.follow.del', { ids }).then(res => {
                if (res.code === 1) {
                    notification.success({
                        message: res.msg || '操作成功'
                    })
                    setfygjchange(!1)
                } else {
                    notification.error({
                        message: res.msg || '操作失败，请重试'
                    })
                }
                followFunc.list()
            })
        },
        del2: (id) => {
            let ids = id > 0 ? [id] : followMsgSelect
            if (!ids.length) {
                notification.error({
                    message: '请先选择'
                })
                return
            }
            http('house.follow.del', { ids }).then(res => {
                if (res.code === 1) {
                    notification.success({
                        message: res.msg || '操作成功'
                    })
                    setfygjchange(!1)
                } else {
                    notification.error({
                        message: res.msg || '操作失败，请重试'
                    })
                }
                followGet()
            })
        },
        staffChange: (store_id, staff_id) => {
            let newForm = { ...followSearch }
            newForm.follow_up_store_id = store_id
            newForm.follow_up_staff_id = staff_id
            setFollowSearch(newForm)
        },
        paramsChange: (name, value) => {
            let newForm = { ...followSearch }
            newForm[name] = value
            setFollowSearch(newForm)
        }
    }

    const [ope, setOpe] = useState(!1);
    const [opeImg, setOpeImg] = useState(!1);
    const [opeVal, setOpeVal, opeValRef] = useStateRef({})
    const followMsgColumns = [
        {
            title: '业主',
            dataIndex: 'owner',
            align: 'center',
        }, {
            title: '员工',
            align: 'center',
            render: e => (e.follow_up_store_data?.name ?? '') + '-' + (e.follow_up_staff_data?.nickname ?? '')
        }, {
            title: '跟进方式',
            dataIndex: 'follow_up_mode',
            align: 'center',
        }, {
            title: '跟进类型',
            dataIndex: 'follow_up_type',
            align: 'center',
        }, {
            title: '跟进内容',
            dataIndex: 'content',
            align: 'center',
            width: 150,
            render: e => (
                <Tooltip title={e}>
                    <div className="u-line-1" style={{ maxWidth: 150 }}>{e}</div>
                </Tooltip>
            )
        }, {
            title: '跟进时间',
            dataIndex: 'follow_up_time',
            align: 'center',
        }, {
            title: '操作',
            key: 'action',
            align: 'center',
            render: e => (
                <Space size="middle">
                    <Popconfirm title="确定删除？" okText="确定" cancelText="取消" onConfirm={() => followFunc.del2(e.id)}>
                        <img className="u-btn" src={require('../../assets/icon/icon-13.png').default} alt="" title="删除" />
                    </Popconfirm>
                </Space>
            ),
        },
    ]
    const [followMsgSource, setFollowMsgSource] = useState([])
    const [followMsgPager, setFollowMsgPager] = useState(pagerDefault)
    const [followMsgTotal, setFollowMsgTotal] = useState(0)
    const [followMsgSelect, setFollowMsgSelect] = useState([])

    const [entrust_type, setEntrust_type] = useState('委托日期')

    const [isDropdown, setisDropdown] = useState(!1)

    // 学校
    const [estateShow, setEstateShow] = useState(!1)
    const [estateId, setEstateId] = useState(0)
    const [estateTab, setEstateTab] = useState(1)

    // 展开
    const [open, setopen] = useState(!1)

    // 单击房源信息对象
    const [info, setinfo] = useState(null)

    // 左键楼盘字典的菜单项
    const menu = (
        <Menu mode="vertical" onClick={() => setisDropdown(!1)}>
            <Menu.Item key='1' onClick={() => {
                paramsChange('estate_name', info?.estate_data?.name ?? '')
                houseGet()
            }}>过滤({info?.estate_data?.name ?? ''})</Menu.Item>
            <Menu.Item key='2' onClick={() => {
                setchange(!1)
                houseGet()
            }}>清除所有过滤条件</Menu.Item>
            <Menu.Item key='3' onClick={() => setKeyShow(!0)}>查看钥匙</Menu.Item>
            {/* e.staff?.employee?.nickname ?? '' */}
            <SubMenu key='4' title='快查'>
                <Menu.Item key='6' onClick={() => {
                    storeChange(info?.staff?.store_id, info?.staff?.staff_id)
                    houseGet()
                }}>快查[ {info?.staff?.employee?.nickname ?? ''} ]房源</Menu.Item>
                <Menu.Item key='7' onClick={() => {
                    storeChange(info?.staff?.store_id)
                    houseGet()
                }}>快查[ {info?.staff?.store?.name ?? ''} ]房源</Menu.Item>
                <Menu.Item key='8' onClick={() => {
                    setFollowShow(!0)
                    filtrFollow(info?.staff, 'staff')
                }}>快查[ {info?.staff?.employee?.nickname ?? ''} ]写的跟进</Menu.Item>
                <Menu.Item key='9' onClick={() => {
                    setFollowShow(!0)
                    filtrFollow(info, 'staffFollow')
                }}>快查[ {info?.staff?.employee?.nickname ?? ''} ]房源的跟进</Menu.Item>
                <Menu.Item key='10' onClick={() => {
                    setFollowShow(!0)
                    filtrFollow(info?.staff, 'store')
                }}>快查[ {info?.staff?.store?.name ?? ''} ]写的跟进</Menu.Item>
                <Menu.Item key='11' onClick={() => {
                    setFollowShow(!0)
                    filtrFollow(info, 'storeFollow')
                }}>快查[ {info?.staff?.store?.name ?? ''} ]房源的跟进</Menu.Item>
            </SubMenu>
            <SubMenu key='12' title="工具">
                <Menu.Item key='13' onClick={() => {
                    paramsChange('estate_name', info?.owner?.name ?? '')
                    houseGet()
                }}>同一业主房源</Menu.Item>
                <Menu.Item key='14' onClick={() => {
                    paramsChange('estate_name', info?.estate_data?.name ?? '')
                    houseGet()
                }}>查询楼盘字典</Menu.Item>
                <Menu.Item key='15' onClick={() => {
                    setmapshow(!0)
                    setCenter({
                        longitude: parseFloat(info.estate?.longitude_latitude.split(',')[0] ?? '0'),
                        latitude: parseFloat(info.estate?.longitude_latitude.split(',')[1] ?? '0')
                    })
                }}>查地图（网上看盘）</Menu.Item>
                <Menu.Item key='16' onClick={() => {
                    setcontacts(!0)
                    setstaffSearch({
                        store_id: info.staff.store_id ?? '',
                        nickname: info?.staff?.employee?.nickname ?? ''
                    })
                }}>查找房源人（通讯录）</Menu.Item>
            </SubMenu>
            <SubMenu key='17' title="快登">
                <Menu.Item key='18' onClick={() => {
                    setHouseShow(!0)
                    setHouseId(info.id)
                }}>快登[ {info?.estate_data?.name ?? ''} ]</Menu.Item>
                <Menu.Item key='19' onClick={() => {
                    setHouseShow(!0)
                    setHouseId(info.id)
                }}>修改房源</Menu.Item>
                <Menu.Item key='20' onClick={() => {
                    setOpe(!0)
                    setOpeVal(info)
                    followGet()
                }}>写跟进</Menu.Item>
                <Menu.Item key='21' onClick={() => setOpeImg(!0)}>照片</Menu.Item>
                <Menu.Item key='22' onClick={() => setqrcodeshow(!0)}>分享</Menu.Item>
            </SubMenu>
            <Menu.Item key='24' onClick={() => collect(info)}>{info?.is_collect ? '取消收藏' : '添加到房源收藏夹'}</Menu.Item>
        </Menu>
    );

    useEffect(() => {
        autoWatch()
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [columnCurrent, open])
    useEffect(() => {
        changelist()
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [open])
    useEffect(() => {
        houseGet()
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [pager])
    useEffect(() => {
        followFunc.list()
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [followPager])
    useEffect(() => {
        !houseShow && setHouseId(0)
    }, [houseShow])

    // 监听房源管理按钮点击
    useEffect(() => {
        followShow && followFunc.list()

        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [followShow])

    // 监听查看钥匙按钮点击
    useEffect(() => {
        keyShow && keysGet()
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [keyShow])

    // 监听图片按钮点击
    useEffect(() => {
        pictureshow && pictureGet()
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [pictureshow])

    // 监听通讯录点击
    useEffect(() => {
        contacts && setcontactsSource(info.house_staff_data.map(i => i.employee))
        contacts && getAllAuth()
        contacts && getAllStore()
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [contacts])

    useEffect(() => {
        staffGet()
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [staffPager])


    return (
        <React.Fragment>
            <Header navCur={2} />
            <div className="House page u-p-20 u-m-20">
                <Collapse bordered={false} defaultActiveKey={['1']}>
                    <Panel header={
                        <div className="part-title">房源列表</div>
                    } key="1">
                        {
                            <div>
                                <div className="u-flex">
                                    <div className="u-flex">
                                        <div className="u-m-l-5 u-text-nowrap">城区</div>
                                        <City value={[params.city, params.region, params.area]} onChange={cityChange} className="u-m-l-5" />
                                    </div>
                                    <div className="u-flex">
                                        <div className="u-m-l-10 u-text-nowrap">智能</div>
                                        <Input placeholder="楼盘、业主、业主电话、编号" value={params.estate_name} onChange={e => paramsChange('estate_name', e.target.value)} className="u-m-l-5" style={{ width: 220 }} />
                                        <Input placeholder="栋座" value={params.position} onChange={e => paramsChange('position', e.target.value)} style={{ width: 100 }} />
                                        <Input placeholder="房号" value={params.room_num} onChange={e => paramsChange('room_num', e.target.value)} style={{ width: 100 }} />
                                    </div>
                                    <div className="u-flex">
                                        <div className=" u-text-nowrap">日期</div>
                                        {params.entrust && <RangePicker value={[params.entrust[0] ? moment(params.entrust[0]) : undefined, params.entrust[1] ? moment(params.entrust[1]) : undefined]} onChange={(e, es) => paramsChange('entrust', es)} placeholder={['委托日期', '委托日期']} inputReadOnly allowClear className="u-m-l-5" style={{ width: 220 }} />}
                                        {!params.entrust && <RangePicker value={[undefined, undefined]} onChange={(e, es) => paramsChange('entrust', es)} placeholder={[entrust_type, entrust_type]} inputReadOnly className="u-m-l-5" style={{ width: 220 }} />}
                                    </div>
                                </div>
                                <div className="u-flex u-m-t-5">
                                    <div className="u-flex">
                                        <div className="u-m-l-5 u-text-nowrap">交易</div>
                                        <Select placeholder="(全部)" allowClear value={params.transaction} onChange={e => paramsChange('transaction', e)} className="u-m-l-5" style={{ width: 80 }}>
                                            <Option value="出售">出售</Option>
                                            <Option value="出租">出租</Option>
                                            <Option value="租售">租售</Option>
                                            <Option value="仅售">仅售</Option>
                                            <Option value="仅租">仅租</Option>
                                        </Select>
                                    </div>
                                    <div className="u-flex">
                                        <div className="u-m-l-10 u-text-nowrap">状态</div>
                                        <Select placeholder="(全部)" allowClear value={params.state} onChange={e => paramsChange('state', e)} className="u-m-l-5" style={{ width: 80 }}>
                                            <Option value="有效">有效</Option>
                                            <Option value="预定">预定</Option>
                                            <Option value="已售">已售</Option>
                                            <Option value="已租">已租</Option>
                                            <Option value="我售">我售</Option>
                                            <Option value="我租">我租</Option>
                                            <Option value="暂缓">暂缓</Option>
                                            <Option value="非有效">非有效</Option>
                                            <Option value="有效+预定">有效+预定</Option>
                                            <Option value="有效+暂缓">有效+暂缓</Option>
                                        </Select>
                                    </div>
                                    <div className="u-flex">
                                        <div className="u-m-l-10 u-text-nowrap">用途</div>
                                        <Select placeholder="(全部)" allowClear value={params.purpose} onChange={e => paramsChange('purpose', e)} className="u-m-l-5" style={{ width: 80 }}>
                                            <Option value="住宅">住宅</Option>
                                            <Option value="商住">商住</Option>
                                            <Option value="商铺">商铺</Option>
                                            <Option value="网点">网点</Option>
                                            <Option value="写字楼">写字楼</Option>
                                            <Option value="厂房">厂房</Option>
                                            <Option value="写厂">写厂</Option>
                                            <Option value="铺厂">铺厂</Option>
                                            <Option value="仓库">仓库</Option>
                                            <Option value="地皮">地皮</Option>
                                            <Option value="车位">车位</Option>
                                            <Option value="其他">其他</Option>
                                            <Option value="非住宅">非住宅</Option>
                                        </Select>
                                    </div>
                                    <div className="u-flex">
                                        <span className="u-m-l-10 u-text-nowrap">价格</span>
                                        <Input placeholder="0.00" value={params.price ? params.price[0] : ''} onChange={e => paramsChange('price', e.target.value, 0)} className="u-m-l-5" style={{ width: 80 }} />
                                        -
                                        <Input placeholder="不限" value={params.price ? params.price[1] : ''} onChange={e => paramsChange('price', e.target.value, 1)} style={{ width: 80 }} />
                                    </div>

                                    <div className="u-flex">
                                        <div className="u-m-l-10 u-text-nowrap">业主电话</div>
                                        <Input placeholder="业主电话" value={params.phone} onChange={e => paramsChange('phone', e.target.value)} className="u-m-l-5" style={{ width: 115 }} />
                                    </div>
                                    <div className="u-flex">
                                        <div className="u-m-l-10 u-text-nowrap">类型</div>
                                        <Select placeholder="(全部)" allowClear value={params.type} onChange={e => paramsChange('type', e)} className="u-m-l-5" style={{ width: 100 }}>
                                            <Option value="多层">多层</Option>
                                            <Option value="高层">高层</Option>
                                            <Option value="小高层">小高层</Option>
                                            <Option value="多层复式">多层复式</Option>
                                            <Option value="高层复式">高层复式</Option>
                                            <Option value="多层跃式">多层跃式</Option>
                                            <Option value="高层跃式">高层跃式</Option>
                                            <Option value="独立别墅">独立别墅</Option>
                                            <Option value="联体别墅">联体别墅</Option>
                                            <Option value="双拼别墅">双拼别墅</Option>
                                            <Option value="叠加别墅">叠加别墅</Option>
                                            <Option value="围院别墅">围院别墅</Option>
                                            <Option value="裙楼">裙楼</Option>
                                            <Option value="四合院">四合院</Option>
                                        </Select>
                                    </div>
                                    <div className="u-flex">
                                        <div className="u-m-l-10 u-text-nowrap">面积</div>
                                        <Input placeholder="0.00" value={params.house_area ? params.house_area[0] : ''} onChange={e => paramsChange('house_area', e.target.value, 0)} className="u-m-l-10" style={{ width: 80 }} />
                                        -
                                        <Input placeholder="不限" value={params.house_area ? params.house_area[1] : ''} onChange={e => paramsChange('house_area', e.target.value, 1)} style={{ width: 80 }} />
                                    </div>
                                </div>
                                <div className="u-flex u-m-t-5 u-m-l-5">
                                    <div className="u-flex ">
                                        <div className="u-text-nowrap">朝向</div>
                                        <Select placeholder="(全部)" allowClear value={params.orientation} onChange={e => paramsChange('orientation', e)} className="u-m-l-5" style={{ width: 80 }}>
                                            <Option value="未知">未知</Option>
                                            <Option value="东">东</Option>
                                            <Option value="南">南</Option>
                                            <Option value="西">西</Option>
                                            <Option value="北">北</Option>
                                            <Option value="南北">南北</Option>
                                            <Option value="东南">东南</Option>
                                            <Option value="西南">西南</Option>
                                            <Option value="东北">东北</Option>
                                            <Option value="西北">西北</Option>
                                            <Option value="东西">东西</Option>
                                        </Select>
                                    </div>
                                    <div className="u-flex">
                                        <div className="u-m-l-10 u-text-nowrap">房型</div>
                                        <Select placeholder="(全部)" allowClear value={params.num_room} onChange={e => paramsChange('num_room', e)} className="u-m-l-5" style={{ width: 80 }}>
                                            <Option>（全部）</Option>
                                            <Option key={'单间'} value={'单间'}>单房</Option>
                                            {
                                                new Array(20).fill(1).map((e, i) => <Option value={i + 1 + '房间'} key={i}>{i + 1}房间 </Option>)
                                            }
                                        </Select>
                                    </div>

                                    <div className="u-flex">
                                        <div className="u-m-l-10 u-text-nowrap">来源</div>
                                        <Select placeholder="(全部)" allowClear value={params.source} onChange={e => paramsChange('source', e)} className="u-m-l-5" style={{ width: 80 }}>
                                            <Option value="来电">来电</Option>
                                            <Option value="来访">来访</Option>
                                            <Option value="中介">中介</Option>
                                            <Option value="朋友">朋友</Option>
                                            <Option value="广告">广告</Option>
                                            <Option value="扫街">扫街</Option>
                                            <Option value="网络">网络</Option>
                                            <Option value="搜房">搜房</Option>
                                            <Option value="口碑">口碑</Option>
                                        </Select>
                                    </div>
                                    <div className="u-flex">
                                        <div className="u-m-l-10 u-text-nowrap">楼层</div>
                                        <Input placeholder="0" value={params.floor ? params.floor[0] : ''} onChange={e => paramsChange('floor', e.target.value, 0)} className="u-m-l-5" style={{ width: 80 }} />
                                        -
                                        <Input placeholder="不限" value={params.floor ? params.floor[1] : ''} onChange={e => paramsChange('floor', e.target.value, 1)} style={{ width: 80 }} />
                                    </div>
                                    <div className="u-flex">
                                        <div className="u-m-l-10 u-text-nowrap">员工</div>
                                        <Store value={[params.store_id, params.staff_id]} onChange={storeChange} className="u-m-l-5" />
                                    </div>


                                    <div className="u-flex u-m-l-80">
                                        <Button size="mini" type="primary" onClick={houseFind}>
                                            <img src={require('../../assets/icon/icon-6.png').default} alt="" />
                                            <span className="u-m-l-5 u-text-nowrap">搜索</span>
                                        </Button>
                                        <div className="u-btn u-flex u-m-l-20" onClick={HouseReset}>
                                            <img src={require('../../assets/icon/icon-7.png').default} alt="" />
                                            <span className="u-m-l-5 u-text-nowrap">清空</span>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        }
                    </Panel>
                </Collapse>

                <div className="u-m-t-20 u-flex">
                    <Column list={columnDefault} onSave={autoSave} className="u-m-l-20" />
                    <div className="u-flex u-m-l-20 u-btn" onClick={() => !(house1?.gjck?.value ?? 1) ? setjurisdiction(!0) : setFollowShow(!0)}>
                        <img className="icon" src={require('../../assets/icon/icon-31.png').default} alt="" />
                        <div>房源跟进</div>
                    </div>
                    <div className="u-flex u-m-l-20 u-btn" onClick={() => setKeyShow(!0)}>
                        <img className="icon" src={require('../../assets/icon/icon-34.png').default} alt="" />
                        <div>查看钥匙</div>
                    </div>
                    <div className="u-flex u-m-l-20 u-btn" onClick={() => setpictureshow(!0)}>
                        <img className="icon" src={require('../../assets/icon/icon-37.png').default} alt="" />
                        <div>照片</div>
                    </div>
                    <div className="u-flex u-m-l-20 u-btn" onClick={() => setopen(!open)}>
                        <div>展开</div>
                    </div>
                    {/* <div className="u-flex u-m-l-20">
                        <Checkbox defaultChecked={false} onChange={() => { }}>公共账号</Checkbox>
                    </div> */}
                    {/* <div className="u-flex u-m-l-20">
                        <Checkbox defaultChecked={false} onChange={e => paramsChange('attribution', e)}>同查三归属人</Checkbox>
                    </div> */}
                    <Button onClick={() => toggleCollect(params.is_collect)} size="small" className="collect-btn u-m-l-20">
                        <HeartTwoTone twoToneColor={params.is_collect ? '#eb2f96' : '#999'} />
                        <span style={{ color: params.is_collect ? '#eb2f96' : '' }}>我的收藏</span>
                    </Button>
                    <Recycle url='house' func={houseGet} columns={backColumns} change={setchange} className="u-m-l-20" />
                </div>
                {/* 房源列表 */}
                <Dropdown overlay={menu} trigger={['contextMenu']} visible={isDropdown} onVisibleChange={VisibleChange}>
                    <div className="u-m-t-20">
                        <Table bordered rowKey={e => e.id} rowSelection={{
                            selectedRowKeys: select,
                            onChange(e) {
                                setSelect(e)
                            }
                        }} onRow={e => ({
                            onDoubleClick: () => {
                                setisDropdown(false)
                                if ((house2?.fyxq?.value ?? '') === '无') return setjurisdiction(!0)
                                setHouseShow(!0)
                                setHouseId(e.id)
                            },
                            onClick: () => {
                                setinfo(e)
                                console.log(e);
                                // setinfo(source.filter(i=>i.id === infoid))
                                setisDropdown(false)
                            },
                            onContextMenu: (event) => {
                                setisDropdown(true)
                                setinfo(e)
                                event.preventDefault()
                            },
                            style: {
                                color: e.room_type === '优质房' ? "red" : e.room_type === '聚焦房' ? "blue" : ''
                            }
                        })} size="small" components={{
                            header: {
                                cell: ResizeableTitle
                            }
                        }} scroll={{ x: open ? 3000 : 'auto' }} dataSource={source} columns={column.map((col, index) => {
                            return {
                                ...col,
                                onHeaderCell: (column) => ({
                                    width: column.width,
                                    onResize: (e, { size }) => {
                                        setColumn((column) => {
                                            const nextColumns = [...column];
                                            nextColumns[index] = {
                                                ...nextColumns[index],
                                                width: size.width
                                            }
                                            return nextColumns;
                                        })
                                    }
                                })
                            }
                        })} pagination={false} />
                    </div>
                </Dropdown>
                <div className="u-flex u-m-t-20 u-row-between">
                    <div>
                        <Button type="primary" size="small" onClick={() => (house1?.fyxz?.value ?? '') === '无' ? setjurisdiction(!0) : setHouseShow(!0)}>
                            <div className="u-flex">
                                <img src={require('../../assets/icon/icon-18.png').default} alt="" />
                                <span className="u-m-l-5">新增</span>
                            </div>
                        </Button>
                        <Popconfirm title="确定删除？" okText="确定" cancelText="取消" onConfirm={houseDel}>
                            <Button className="u-m-l-20" type="primary" size="small" danger>
                                <div className="u-flex">
                                    <img src={require('../../assets/icon/icon-19.png').default} alt="" />
                                    <span className="u-m-l-5">删除</span>
                                </div>
                            </Button>
                        </Popconfirm>
                    </div>
                    <Pagination showQuickJumper current={pager.page} pageSize={pager.pageSize} total={total} onChange={(page, pageSize) => setPager({ page, pageSize })} />
                </div>
            </div>
            <Footer info={info} setOpeImg={setOpeImg} isshow={'house'} setEstateShow={setEstateShow} setEstateId={setEstateId} setEstateTab={setEstateTab}
                setOpe={setOpe} setOpeVal={setOpeVal} followGet={followGet}
                setmapshow={setmapshow} setCenter={setCenter} setFollow={setFollow} />
            <Modal zIndex={999} title="添加跟进" width={370} visible={follow.show} onOk={followFormConfirm} onCancel={() => setFollow({ show: !1 })}>
                <div className="Modal">
                    {mask.show && (
                        <div className="mask">
                            <Spin size="large" tip={mask.text} />
                        </div>
                    )}
                    <div className="u-flex">
                        <div className="label">时间方式</div>
                        <DatePicker placeholder="时间" value={followForm.follow_up_time ? moment(followForm.follow_up_time) : ''} onChange={(e, es) => followFormChange('follow_up_time', es)} className="u-m-l-10" style={{ width: 120 }} />
                        <Select placeholder="跟进方式" value={followForm.follow_up_mode} onChange={e => followFormChange('follow_up_mode', e)} className="u-m-l-10" style={{ width: 120 }}>
                            <Option value="去电">去电</Option>
                            <Option value="来电">来电</Option>
                            <Option value="看房">看房</Option>
                            <Option value="勘察">勘察</Option>
                            <Option value="来访">来访</Option>
                            <Option value="拜访">拜访</Option>
                            <Option value="派单">派单</Option>
                            <Option value="短信">短信</Option>
                            <Option value="邮件">邮件</Option>
                            <Option value="信函">信函</Option>
                            <Option value="申请">申请</Option>
                            <Option value="修改">修改</Option>
                            <Option value="保留">保留</Option>
                        </Select>
                        {/*<div className="label u-m-l-10">下次提醒</div>*/}
                        {/*<DatePicker placeholder="时间" value={followForm.next_remind?moment(followForm.next_remind):''} onChange={(e, es) => followFormChange('next_remind', es)} className="u-m-l-10" style={{width: 120}} />*/}
                    </div>
                    <div className="u-flex u-m-t-20">
                        <div className="label">跟进员工</div>
                        <Store value={[followForm.follow_up_store_id, followForm.follow_up_staff_id]} onChange={followStaffChange} className="u-m-l-10" />
                        {/*<div className="label u-m-l-10">提醒范围</div>*/}
                        {/*<Store value={[followForm.remind_store_id, followForm.remind_staff_id]} onChange={remindStaffChange} className="u-m-l-10" />*/}
                    </div>
                    <div className="u-flex u-m-t-20">
                        <div className="label">去电业主</div>
                        <Input placeholder="业主" value={followForm.owner} onChange={e => followFormChange('owner', e.target.value)} className="u-m-l-10" style={{ width: 120 }} />
                        <Select placeholder="跟进类型" value={followForm.follow_up_type} onChange={e => followFormChange('follow_up_type', e)} className="u-m-l-10" style={{ width: 120 }}>
                            <Option value="普通跟进">普通跟进</Option>
                            <Option value="重点跟进">重点跟进</Option>
                            <Option value="专属跟进">专属跟进</Option>
                        </Select>
                        {/*<div className="label u-m-l-10">提醒内容</div>*/}
                        {/*<Input placeholder="提醒内容" value={followForm.remind_cont} onChange={e => followFormChange('remind_cont', e.target.value)} className="u-m-l-10" style={{width: 250}} />*/}
                    </div>
                    <div className="u-flex u-m-t-20">
                        <div className="label">跟进内容</div>
                        <TextArea placeholder="跟进内容" value={followForm.content} onChange={e => followFormChange('content', e.target.value)} className="u-m-l-10" style={{ width: 250, height: 105 }} />
                        {/*<div className="u-m-l-10">*/}
                        {/*    <div className="u-flex">*/}
                        {/*        <div className="label">处理员工</div>*/}
                        {/*        <Store value={[followForm.handle_store_id, followForm.handle_staff_id]} onChange={handleStaffChange} className="u-m-l-10" />*/}
                        {/*    </div>*/}
                        {/*    <div className="u-flex u-m-t-20">*/}
                        {/*        <div className="label">经理点评</div>*/}
                        {/*        <TextArea placeholder="" value={followForm.common} onChange={e => followFormChange('common', e.target.value)} className="u-m-l-10" style={{width: 250}}/>*/}
                        {/*    </div>*/}
                        {/*</div>*/}
                    </div>
                    <div className="tip u-m-t-20 u-m-l-10">
                        <span className="tip-icon">*</span>
                        <span>跟进保存后不可修改，请确认内容后再保存</span>
                    </div>
                </div>
            </Modal>
            <Modal title="房源信息" zIndex={2} width={1100} visible={houseShow} footer={false} onCancel={() => setHouseShow(!1)} destroyOnClose>
                <Edit sethange={setchange} setj={setjurisdiction} staffinfo={{ house1, house2 }} close={setHouseShow} refresh={houseGet} id={houseId} info={info} setEstateShow={() => setEstateShow} setEstateId={() => setEstateId} setEstateTab={() => setEstateTab} setOpe={() => setOpe} />
            </Modal>
            <Modal title="房源跟进" width={1280} visible={followShow} footer={false} onCancel={() => setFollowShow(!1)} destroyOnClose>
                <div className="Modal">
                    <div className="u-flex u-row-between">
                        {/* 回收站 */}
                        <Recycle url='house.follow' func={followFunc.list} columns={followColumn} change={setfygjchange} />
                        {/* 搜索区域 */}
                        <div className="u-flex">
                            <div className="u-flex">
                                <div className="u-m-l-20 u-text-nowrap">方式</div>
                                <Select placeholder="(全部)" allowClear value={followSearch.source} onChange={e => followFunc.paramsChange('source', e)} className="u-m-l-10" style={{ width: 80 }}>
                                    <Option value="去电">去电</Option>
                                    <Option value="来电">来电</Option>
                                    <Option value="看房">看房</Option>
                                    <Option value="勘探">勘探</Option>
                                    <Option value="来访">来访</Option>
                                    <Option value="拜访">拜访</Option>
                                </Select>
                            </div>
                            <div className="u-flex">
                                <div className="u-m-l-10 u-text-nowrap">交易</div>
                                <Select placeholder="(全部)" allowClear value={followSearch.state} onChange={e => followFunc.paramsChange('state', e)} className="u-m-l-10" style={{ width: 80 }}>
                                    <Option value="出售">出售</Option>
                                    <Option value="出租">出租</Option>
                                    <Option value="租售">租售</Option>
                                    <Option value="仅售">仅售</Option>
                                    <Option value="仅租">仅租</Option>
                                </Select>
                            </div>
                            <div className="u-flex">
                                {followSearch.entrust && <RangePicker value={[followSearch.entrust[0] ? moment(followSearch.entrust[0]) : undefined, followSearch.entrust[1] ? moment(followSearch.entrust[1]) : undefined]} onChange={(e, es) => followFunc.paramsChange('entrust', es)} placeholder={['跟进时间', '跟进时间']} inputReadOnly allowClear className="u-m-l-10" style={{ width: 200 }} />}
                                {!followSearch.entrust && <RangePicker value={[undefined, undefined]} onChange={(e, es) => followFunc.paramsChange('entrust', es)} placeholder={['跟进时间', '跟进时间']} inputReadOnly className="u-m-l-10" style={{ width: 200 }} />}
                            </div>
                            <Store value={[followSearch.follow_up_store_id, followSearch.follow_up_staff_id]} onChange={followFunc.staffChange} className="u-m-l-10" />
                            <Input placeholder="去电业主" value={followSearch.owner} onChange={e => followFunc.paramsChange('owner', e.target.value)} className="u-m-l-10" style={{ width: 100 }} />
                            <Button size="mini" type="primary" onClick={() => {
                                setfygjchange(!1)
                                followFunc.list()
                            }} className="u-m-l-10">
                                <img src={require('../../assets/icon/icon-6.png').default} alt="" />
                                <span className="u-m-l-5 u-text-nowrap">搜索</span>
                            </Button>
                        </div>

                    </div>
                    {/* 列表展示区域 */}
                    <div className="u-m-t-20">
                        <Table bordered rowKey={e => e.id} rowSelection={{
                            selectedRowKeys: followSelect,
                            onChange(e) {
                                setFollowSelect(e)
                            }
                        }} size="small" scroll={{ x: 980 }} dataSource={followSource} columns={followColumns} pagination={false} />
                    </div>
                    <div className="u-flex u-row-between u-m-t-20">
                        <Popconfirm title="确定删除？" okText="确定" cancelText="取消" onConfirm={followFunc.del}>
                            <Button type="primary" size="small" danger>
                                <div className="u-flex">
                                    <img src={require('../../assets/icon/icon-19.png').default} alt="" />
                                    <span className="u-m-l-5">删除</span>
                                </div>
                            </Button>
                        </Popconfirm>
                        <Pagination showQuickJumper current={followPager.page} pageSize={followPager.pageSize} total={followTotal} onChange={(page, pageSize) => setFollowPager({ page, pageSize })} />
                    </div>
                </div>
            </Modal>
            <Modal title="查看钥匙" width={1280} visible={keyShow} footer={false} onCancel={() => setKeyShow(!1)} destroyOnClose>
                <div className="Modal">
                    <div className="u-flex u-row-between">
                        {/* 回收站 */}
                        <Recycle url='key' func={keysGet} columns={keybackColumns} />
                    </div>
                    {/* 列表展示区域 */}
                    <div className="u-m-t-20">
                        <Table bordered rowKey={e => e.id} rowSelection={{
                            selectedRowKeys: selected,
                            onChange(e) {
                                setSelected(e)
                            }
                        }} size="small" scroll={{ x: 980 }} dataSource={keysource} columns={keycolumns} pagination={false} />
                    </div>
                    <div className="u-flex u-row-between u-m-t-20">
                        <div className="u-flex">
                            <Button type="primary" size="small" onClick={() => {
                                if (!house2?.yslr?.value ?? 1) return setjurisdiction(!0)
                                modalShow(setKeysModal)
                                setisxin(!0)
                            }}>
                                <div className="u-flex">
                                    <img src={require('../../assets/icon/icon-18.png').default} alt="" />
                                    <span className="u-m-l-5">新增</span>
                                </div>
                            </Button>
                            <Popconfirm className="u-m-l-20" title="确定删除？" okText="确定" cancelText="取消" onConfirm={keysDel}>
                                <Button type="primary" size="small" danger>
                                    <div className="u-flex">
                                        <img src={require('../../assets/icon/icon-19.png').default} alt="" />
                                        <span className="u-m-l-5">删除</span>
                                    </div>
                                </Button>
                            </Popconfirm>
                        </div>
                        <Pagination showQuickJumper current={followPager.page} pageSize={followPager.pageSize} total={followTotal} onChange={(page, pageSize) => setFollowPager({ page, pageSize })} />
                    </div>
                </div>
            </Modal>
            <Modal title="跟进信息" zIndex={3} width={1000} visible={ope} footer={false} onCancel={() => setOpe(!1)} destroyOnClose>
                <div className="Modal">
                    <div className="detail-title main-color u-font-18">【{opeVal.house_number}】{opeVal?.estate_data?.name}</div>
                    <div className="u-flex u-flex-wrap u-content-color u-m-t-20 u-font-16">
                        <div className="u-flex u-m-l-20">
                            <div className="label">栋座位置：</div>
                            <div className="value">{opeVal?.building_data?.name ?? ''}</div>
                        </div>
                        <div className="u-flex u-m-l-20">
                            <div className="label">单元：</div>
                            <div className="value">{opeVal?.unit ?? ''}</div>
                        </div>
                        <div className="u-flex u-m-l-20">
                            <div className="label">楼层：</div>
                            <div className="value">{opeVal?.floor ?? ''}</div>
                        </div>
                        <div className="u-flex u-m-l-20">
                            <div className="label">房号：</div>
                            <div className="value">{opeVal?.room_num ?? ''}</div>
                        </div>
                        <div className="u-flex u-m-l-20">
                            <div className="label">房型：</div>
                            <div className="value">{(opeVal.num_room ?? '') + (opeVal.num_balcony ? ' ' + opeVal.num_balcony : '') + (opeVal.num_office ? ' ' + opeVal.num_office : '') + (opeVal.num_toilet ? ' ' + opeVal.num_toilet : '')}</div>
                        </div>
                        {opeVal.price_data && <div className="u-m-l-20">售价：{opeVal.price_data}</div>}
                        {opeVal.rental_data && <div className="u-m-l-20">租价：{opeVal.rental_data}</div>}
                    </div>
                    <div className="u-content-color u-flex u-font-16 u-m-t-10">
                        {opeVal?.house_owner_data?.length && opeVal.house_owner_data.map(e => (
                            <div className="u-flex u-m-l-20">
                                <div className="label">业主：</div>
                                <div className="value">{e.name} {e.mobile}</div>
                            </div>
                        ))}
                    </div>
                    <div className="u-m-t-20">
                        <Table bordered rowKey={e => e.id} rowSelection={{
                            selectedRowKeys: followMsgSelect,
                            onChange(e) {
                                setFollowMsgSelect(e)
                            }
                        }} size="small" dataSource={followMsgSource} columns={followMsgColumns} pagination={false} />
                    </div>
                    <div className="u-flex u-row-between u-m-t-20">
                        <div className="u-flex">
                            <Button type="primary" size="small" ghost onClick={() => setFollow({ show: !0 })}>写跟进</Button>
                            <Popconfirm title="确定删除？" okText="确定" cancelText="取消" onConfirm={followFunc.del2}>
                                <Button type="primary" size="small" danger className="u-flex u-m-l-20">
                                    <img src={require('../../assets/icon/icon-19.png').default} alt="" />
                                    <span className="u-m-l-5">删除</span>
                                </Button>
                            </Popconfirm>
                        </div>
                        <Pagination showQuickJumper current={followMsgPager.page} pageSize={followMsgPager.pageSize} total={followMsgTotal} onChange={(page, pageSize) => setFollowMsgPager({ page, pageSize })} />
                    </div>
                </div>
            </Modal>
            <Modal title="图片信息" width={1000} visible={opeImg} footer={false} onCancel={() => setOpeImg(!1)} destroyOnClose>
                <div className="Modal">
                    {
                        SwiperCore.use([Autoplay]) &&
                        <div className="u-flex-1 u-m-l-20 u-m-r-20">
                            <Swiper
                                slidesPerView={1} //同屏显示多少个swiper滑块
                                spaceBetween={10}
                                initialSlide={1} //默认展示第几个滑块
                                // loop={true} //是否开启无限轮播
                                observer={true} //修改swiper自己或子元素时，自动初始化swiper(如果数据是请求下来的一定要重新初始化)
                                observeParents={true} //修改swiper的父元素时，自动初始化swiper(如果数据是请求下来的一定要重新初始化)
                                autoplay={true} //自动轮播开启
                            >
                                {opeVal?.house_resources_data &&
                                    opeVal.house_resources_data.map(e => {
                                        return (
                                            <SwiperSlide key={e.id}>
                                                <img src={BASE_URL + e.content} alt="" onClick={() => window.open(BASE_URL + e.content)} style={{ width: '100%', objectFit: 'contain' }} />
                                            </SwiperSlide>
                                        )
                                    })
                                }
                            </Swiper>
                        </div>
                    }
                </div>
            </Modal>
            <Modal title={isxin ? '新增钥匙' : '管理钥匙'} okText="保存" width={480} destroyOnClose maskClosable={false} visible={keysModal.show} onOk={keysConfirm} onCancel={keysCancel}>
                <div className="Modal">
                    <div className="u-flex">
                        <div className="label">钥匙类型</div>
                        <Select placeholder="状态" value={keys.type} onChange={e => keysChange('type', e)} className="u-m-l-10" style={{ width: 120 }}>
                            <Option value="机械钥匙">机械钥匙</Option>
                            <Option value="门卡钥匙">门卡钥匙</Option>
                            <Option value="密码钥匙">密码钥匙</Option>
                        </Select>
                        <div className="label u-m-l-10">状态</div>
                        <Select placeholder="状态" value={keys.state} onChange={e => keysChange('state', e)} className="u-m-l-10" style={{ width: 120 }}>
                            <Option value="stay">在库</Option>
                            <Option value="lend">借出</Option>
                            <Option value="retreat">退还</Option>
                            <Option value="void">作废</Option>
                        </Select>
                    </div>
                    <div className="u-flex u-m-t-20">
                        <div className="label">钥匙编号</div>
                        <Input placeholder="房源编号" value={keys.house_id} onChange={e => keysChange('house_id', e.target.value)} className="u-m-l-10" style={{ width: 120 }} />
                        <div className="label u-m-l-10">收钥匙日期</div>
                        <DatePicker className="u-m-l-10" value={keys.obtain_time ? moment(keys.obtain_time) : ''} onChange={(dates, dateString) => keysChange('obtain_time', dateString)} />
                    </div>
                    <div className="u-flex u-m-t-20">
                        <div className="label">所在门店</div>
                        <Store value={[keys.store_id, keys.staff_id]} onChange={keysStoreChange} className="u-m-l-10" />
                    </div>
                    <div className="u-flex u-m-t-20">
                        <div className="label u-m-l-28">备注</div>
                        <TextArea placeholder="备注" value={keys.memo} onChange={e => keysChange('memo', e.target.value)} className="u-m-l-10" style={{ width: 360, height: 70 }} />
                    </div>
                </div>
            </Modal>
            <Modal title="图片" width={1280} visible={pictureshow} footer={false} onCancel={() => setpictureshow(!1)} destroyOnClose>
                <div className="Modal">
                    <div className="u-flex u-row-between">
                        {/* 回收站 */}
                        <Recycle url='key' func={keysGet} columns={keybackColumns} />
                    </div>
                    {/* 列表展示区域 */}
                    <div className="u-m-t-20">
                        <Table bordered rowKey={e => e.id} size="small" scroll={{ x: 980 }} dataSource={picturesource} columns={column} pagination={false} />
                    </div>
                    <div className="u-flex u-row-between u-m-t-20">
                        <Pagination showQuickJumper current={followPager.page} pageSize={followPager.pageSize} total={followTotal} onChange={(page, pageSize) => setFollowPager({ page, pageSize })} />
                    </div>
                </div>
            </Modal>
            <Modal title="地图" width={1280} visible={mapshow} footer={false} onCancel={() => setmapshow(!1)} destroyOnClose>
                <div className="Modal">
                    <div className="u-m-t-20" style={{ width: '100%', height: 600 }}>
                        <Map events={{
                            click: e => {
                                setCenter({ longitude: e.lnglat.lng, latitude: e.lnglat.lat })
                            }
                        }} center={center} plugins={['ToolBar']}>
                            <Marker position={center} />
                        </Map>
                    </div>
                </div>
            </Modal>
            <Modal title="员工通讯录" width={1280} visible={contacts} footer={false} onCancel={() => setcontacts(!1)} destroyOnClose>
                <div className="Modal">
                    <div className="u-flex u-row-right">
                        <div className="u-flex">
                            <div className="u-m-l-20 u-text-nowrap">部门</div>
                            <Select value={staffSearch.store_id} onChange={e => paramcontacts('store_id', e)} placeholder="(全部)" allowClear className="u-m-l-10" style={{ width: 130 }}>
                                {allStore.map(store => (
                                    <Option key={'store-' + store.id} value={store.id}>{store.name}</Option>
                                ))}
                            </Select>
                        </div>
                        <div className="u-flex">
                            <div className="u-m-l-20 u-text-nowrap">姓名</div>
                            <Input value={staffSearch.nickname} onChange={e => paramcontacts('nickname', e.target.value)} className="u-m-l-5" style={{ width: 100 }} />
                        </div>
                        <div className="u-flex">
                            <div className="u-m-l-20 u-text-nowrap">职务</div>
                            <Select onChange={e => paramcontacts('group_id', e)} placeholder="(全部)" allowClear className="u-m-l-10" style={{ width: 130 }}>
                                {allAuth.map(group => (
                                    <Option key={'store-' + group.id} value={group.id}>{group.name}</Option>
                                ))}
                            </Select>
                        </div>
                        <div className="u-flex">
                            {/*  format="MM-DD"  */}
                            <div className="u-m-l-20 u-text-nowrap">生日</div>
                            {staffSearch.s_birthday && <RangePicker value={[staffSearch.s_birthday ? moment(staffSearch.s_birthday) : undefined, staffSearch.e_birthday ? moment(staffSearch.e_birthday) : undefined]} onChange={(e, es) => paramcontacts('birthday', es)} inputReadOnly allowClear className="u-m-l-10" style={{ width: 200 }} format="MM-DD" />}
                            {!staffSearch.s_birthday && <RangePicker value={[undefined, undefined]} onChange={(e, es) => paramcontacts('birthday', es)} inputReadOnly className="u-m-l-10" style={{ width: 200 }} format="MM-DD" />}
                        </div>
                        <Button size="mini" type="primary" onClick={staffFind} className="u-m-l-20">
                            <img src={require('../../assets/icon/icon-6.png').default} alt="" />
                            <span className="u-m-l-5 u-text-nowrap">搜索</span>
                        </Button>
                    </div>
                    <div className="u-m-t-20">
                        <Table bordered rowKey={e => e.id} size="small" scroll={{ x: 980 }} dataSource={contactsSource} columns={contactsTable} pagination={false} />
                    </div>
                    <div className="u-flex u-row-between u-m-t-20">
                        <Pagination showQuickJumper current={staffPager.page} pageSize={staffPager.pageSize} total={staffTotal} />
                    </div>
                </div>
            </Modal>
            <Modal title="分享房源" width={300} visible={qrcodeshow} footer={false} onCancel={() => setqrcodeshow(!1)} destroyOnClose>
                <div className="Modal u-flex-col u-col-center">
                    {/* <QRcode value="http://www.baidu.com" size={200} /> */}
                </div>
            </Modal>
            <Modal title="楼盘信息" width={1100} visible={estateShow} footer={false} onCancel={() => setEstateShow(!1)} destroyOnClose>
                <Editb close={setEstateShow} id={estateId} setId={setEstateId} tab={estateTab} />
            </Modal>
            <Modal title="提示" visible={jurisdiction} footer={false} onCancel={() => setjurisdiction(!1)} destroyOnClose>
                <h3>权限不足</h3>
            </Modal>
        </React.Fragment>

    );

    // 控制右键菜单显示隐藏
    function VisibleChange() {
        setisDropdown(!isDropdown)
        // if(!e) setisDropdown(false)

    }

    function houseGet() {
        if ((house1?.fyck?.value ?? '') === '无') return setjurisdiction(!0)
        if (change && JSON.parse(sessionStorage.getItem('house_list'))) {
            const house = JSON.parse(sessionStorage.getItem('house_list'))
            for (const key in house.rows) {
                if (key * 1 === pager.page) {
                    setSource(house.rows[key])
                    setTotal(house.total)
                    return
                }
            }
        }
        let newParams = enSplit(params, { price: ',', house_area: ',', floor: ',', entrust: ' - ' })
        http('house.index', {
            ...fieldGet(field, newParams, pager.page, pager.pageSize)
        }).then(res => {
            if (res.code === 1) {
                const page = pager.page
                if (total && change) {
                    let arr = JSON.parse(sessionStorage.getItem('house_list'))
                    arr.rows[page] = []
                    res.data.rows.forEach(i => arr.rows[page].push(i))
                    sessionStorage.setItem('house_list', JSON.stringify(arr))
                    setchange(!0)
                    setSource(res.data.rows)
                    setTotal(res.data.total)
                    return
                }
                const data = {
                    total: res.data.total,
                    rows: {
                        [page]: res.data.rows
                    }
                }
                sessionStorage.setItem('house_list', JSON.stringify(data))
                setchange(!0)
                setSource(res.data.rows)
                setTotal(res.data.total)
            }
        }).catch(err => { console.log(err); })
    }
    function houseDel(id) {
        if ((house2?.fyjl?.value ?? '') === '无') return setjurisdiction(!0)
        let ids = id > 0 ? [id] : select
        http('house.del', { ids }).then(res => {
            if (res.code === 1) {
                notification.success({
                    message: res.msg || '操作成功'
                })
                setchange(!1)
            } else {
                notification.error({
                    message: res.msg || '操作失败，请重试'
                })
            }
            houseGet()
        })
    }
    // function houseGetInfo() {
    //     // let newParams = enSplit(params, { price: ',', house_area: ',', floor: ',', entrust: ' - ' })
    //     http('house.housegetInfo', {
    //         // ...fieldGet(field, newParams, pager.page, pager.pageSize),

    //     }).then(res => {
    //         if (res.code === 1) {
    //             // console.log(res.data,'房源管理数据列表')
    //             // setSource(res.data.rows)
    //             // setTotal(res.data.total)
    //         }
    //     }).catch((err) => { console.log(err); })
    // }
    function houseFind() {
        setchange(!1)
        let page = { ...pager }
        page.size = 1
        setPager(page)
        houseGet()
    }
    function HouseReset() {
        setchange(!1)
        setSelect([])
        setParams({})
        setPager({ page: 1, pageSize: 10 })
        houseGet()
    }
    function cityChange(city, region, area) {
        let newParams = JSON.parse(JSON.stringify(params))
        newParams.city = city
        newParams.region = region
        newParams.area = area
        setParams(newParams)
    }
    // 保存搜索字段
    function paramsChange(name, value, ind = null) {
        let newParams = JSON.parse(JSON.stringify(params))
        if (ind !== null) {
            let arr = newParams[name] || []
            arr[ind] = value
            newParams[name] = arr
        } else {
            switch (name) {
                case 'entrust':
                case 'price':
                case 'area':
                    if (!value[0] || !value[1]) {
                        value = ''
                    }
                    break;
                case 'entrust_type':
                    setEntrust_type(value)
                    break;
                case 'publicAccount':
                    value = value.target.checked
                    break;
                case 'attribution':
                    value = value.target.checked
                    break;
                default: break;
            }
            newParams[name] = value
        }
        setchange(!1)
        setParams(newParams)
    }

    function storeChange(store_id, staff_id) {
        setchange(!1)
        let newParams = JSON.parse(JSON.stringify(params))
        newParams.store_id = store_id
        newParams.staff_id = staff_id
        setParams(newParams)
    }
    function autoWatch() {
        let list = [];
        columnCurrent.forEach((e, i) => {
            e.checked && list.push(columnDefault[i])
        })
        setColumn(list)
    }
    function changelist() {
        if (open) {
            setColumn(columnCurrent)
        } else {
            setColumn(columnCurrents)
        }
    }
    function autoSave(e) {
        setColumnCurrent(e)
    }

    // 请求跟进信息
    function followGet() {
        http('house.follow.index', {
            filter: JSON.stringify({ house_id: opeValRef.current.id }),
            op: JSON.stringify({ house_id: '=' }),
            offset: 1,
            limit: 10
        }).then(res => {
            if (res.code === 1) {
                setchange(!1)
                setFollowMsgSource(res.data.rows)
                setFollowMsgTotal(res.data.total)
                houseGet()
                // setinfo(source.filter(i=>i.id === infoid))
            }
        })
    }
    function followFormChange(name, value) {
        let newForm = { ...followForm }
        newForm[name] = value
        setFollowForm(newForm)
    }
    function followStaffChange(store_id, staff_id) {
        let newForm = { ...followForm }
        newForm.follow_up_store_id = store_id
        newForm.follow_up_staff_id = staff_id
        setFollowForm(newForm)
    }
    // function remindStaffChange(store_id, staff_id) {
    //     let newForm = { ...followForm }
    //     newForm.remind_store_id = store_id
    //     newForm.remind_staff_id = staff_id
    //     setFollowForm(newForm)
    // }
    // function handleStaffChange(store_id, staff_id) {
    //     let newForm = { ...followForm }
    //     newForm.handle_store_id = store_id
    //     newForm.handle_staff_id = staff_id
    //     setFollowForm(newForm)
    // }
    function followFormConfirm() {
        if (house1?.gjxz?.value ?? 0) {
            if (store.getState().userInfo.user_id !== followForm.follow_up_staff_id) return setjurisdiction(!0)
        }
        setMask({ show: !0, text: '请稍等...' })
        http('house.follow.add', {
            row: {
                house_id: opeVal.id,
                ...followForm
            }
        }).then(res => {
            if (res.code === 1) {
                notification.success({
                    message: res.msg || '操作成功'
                })
                setfygjchange(!1)
                setFollow(!1)
                followGet()
            } else {
                notification.error({
                    message: res.msg || '操作失败，请重试'
                })
            }
            setMask({ show: !1 })
        })
    }
    function toggleCollect(type) {
        paramsChange('is_collect', type ? '' : 1)
        setPager(pagerDefault)
    }
    function collect(e) {
        setchange(!1)
        let url, data
        if (e.is_collect) {
            url = 'house.collect.del'
            data = {
                ids: e.collect.id
            }
        } else {
            url = 'house.collect.add'
            data = {
                row: {
                    house_id: e.id
                }
            }
        }
        console.log(data);
        http(url, data).then(res => {
            houseGet()
        })
    }

    // 查看钥匙
    function keysEdit(ids) {
        http('key.one', { ids }).then(res => {
            if (res.code === 1) {
                setKeys(res.data)
                modalShow(setKeysModal)
            }
        })
    }
    // 删除钥匙
    function keysDel(id) {
        let ids = id > 0 ? [id] : selected
        http('key.del', { ids }).then(res => {
            if (res.code === 1) {
                notification.success({
                    message: res.msg || '删除成功'
                })
            } else {
                notification.error({
                    message: res.msg || '操作失败，请重试'
                })
            }
            keysGet()
        }).catch(err => console.log(err))
    }
    // 是否显示新增钥匙
    function modalShow(func, text) {
        func({ show: !0, text })
    }
    function keysGet() {
        let newForm = { ...form };
        if (date.name && date.value) {
            newForm[date.name] = date.value.join(' - ')
        }
        http('key.index', {
            ...fieldGet(field, newForm, pager.page, pager.pageSize),
        }).then(res => {
            if (res.code === 1) {
                setKeySource(res.data.rows)
                setTotal(res.data.total)
            }
        })
    }
    function keysConfirm() {
        let url = keys?.id ? 'key.edit' : 'key.add'
        http(url, {
            row: keys
        }).then(res => {
            if (res.code === 1) {
                notification.success({
                    message: res.msg || '添加成功'
                })
                setKeys({})
                modalHide(setKeysModal)
                keysGet()
            } else {
                notification.error({
                    message: res.msg || '操作失败，请重试'
                })
            }
        })
    }
    function keysCancel() {
        setKeys({})
        modalHide(setKeysModal)
    }
    function keysChange(name, value) {
        let newKeys = { ...keys }
        newKeys[name] = value
        setKeys(newKeys)
    }
    function keysStoreChange(store_id, staff_id) {
        let newKeys = { ...keys }
        newKeys.store_id = store_id
        newKeys.staff_id = staff_id
        setKeys(newKeys)
    }
    function modalHide(func) {
        func({ show: !1, text: '' })
    }

    // 请求图片数据
    function pictureGet() {

        http('house.index').then(res => {
            if (res.code === 1) {
                const picture = res.data.rows.filter(i => i.house_resources_data.length !== 0)
                // setSource(res.data.rows)
                // setTotal(res.data.total)
                setpicturesource(picture)
            }
        }).catch(err => { console.log(err); })
    }

    // 请求通讯录员工数据
    function staffGet() {
        http('user.index', {
            ...fieldGet(
                { name: 'like' },
                staffSearch,
                staffPager.page,
                staffPager.pageSize
            )
        }).then(res => {
            if (res.code === 1) {
                setcontactsSource(res.data.rows)
                setStaffTotal(res.data.total)
            }
        }).catch(err => console.log(err))
    }
    // 保存通讯录搜索字段
    function paramcontacts(name, value, ind = null) {
        let newQuery = JSON.parse(JSON.stringify(staffSearch))
        if (ind !== null) {
            let arr = newQuery[name] || []
            arr[ind] = value
            newQuery[name] = arr
        } else if (name === 'birthday') {
            newQuery['s_birthday'] = value[0].split('-').join('')
            newQuery['e_birthday'] = value[1].split('-').join('')
        } else {
            newQuery[name] = value
        }
        setstaffSearch(newQuery)
    }
    function staffFind() {
        let pager = { ...staffPager }
        pager.size = 1
        setStaffPager(pager)
    }

    // 请求身份信息
    function getAllAuth() {
        http('auth.list').then(res => {
            if (res.code === 1) {
                setAllAuth(res.data.rows)
            }
        })
    }
    // 请求部门信息
    function getAllStore() {
        http('store.list').then(res => {
            if (res.code === 1) {
                setAllStore(res.data.rows)
            }
        })
    }

    function filtrFollow(name, type) {
        switch (type) {
            case 'staff':
                followFunc.staffChange(name?.store?.id ?? '', name?.employee?.id ?? '')
                break;
            case 'staffFollow':
                setnew_filter(JSON.stringify({ fy_staff_id: name?.staff?.staff_id ?? '' }))
                // followFunc.staffChange(name?.store?.id ?? '',name?.employee?.id ?? '')
                break;
            case 'store':
                followFunc.staffChange(name?.store?.id ?? '')
                break;
            case 'storeFollow':
                setnew_filter(JSON.stringify({ fy_store_id: name?.staff?.store_id ?? '' }))
                break;

            default:
                break;
        }
        setfygjchange(!1)
        followFunc.list()
    }

}

export default House;